<script setup>
import {codeBtnLoading,codeBtnDisable, codeBtnText, getCode} from '@/views/login/GetMailCode.js'
import {computed, ref, reactive, watchEffect} from "vue";
import {useRouter, useRoute} from "vue-router";
import {loginByMailAPI, loginByPwdAPI} from "@/api/login.js";
import {login} from "@/views/login/Login.js";

const router = useRouter()
const route = useRoute()

// *****************
// * 登录相关数据限制 *
// *****************
const env = import.meta.env
const MAIL_MAX_LEN = Number.parseInt(env.VITE_MAIL_MAX_LEN) || 255
const PWD_MAX_LEN = Number.parseInt(env.VITE_PWD_MAX_LEN) || 16

// ***********
// * 登录信息 *
// ***********
const loginInfo = reactive({
  account: '',
  pwd: ''
})

// **************
// * 登录按钮状态 *
// **************
const loginBtnLoading = ref(false)
// const loginBtnDisable = computed(() => {
//   return loginInfo.mail.length <= 0 || loginInfo.code.length < CODE_LEN || loginBtnLoading.value
// })
const loginBtnDisable = ref(false)

watchEffect(() => {
  if (loginInfo.account.length <= 0 || loginInfo.account.length <= 0) {
    loginBtnDisable.value = true
  } else {
    loginBtnDisable.value = false
  }
})

// *******
// * 登录 *
// *******
function handleLogin() {
  login(
      loginBtnLoading,
      loginBtnDisable,
      () => {
        return loginByPwdAPI(loginInfo.account, loginInfo.pwd)
      },
      router,
      route
  )
}
</script>

<template>
  <div class="login-form-mail">
    <van-cell-group>
      <van-field
          v-model="loginInfo.account"
          clearable
          required
          placeholder="请输入账号/用户名/邮箱"
          :maxlength="MAIL_MAX_LEN"
      >
        <template #left-icon>
          <span class="iconfont icon-yonghu1"></span>
        </template>
      </van-field>
      <van-field
          clearable
          required
          v-model="loginInfo.pwd"
          placeholder="请输入密码"
          :maxlength="PWD_MAX_LEN"
          type="password"
      >
        <template #left-icon>
          <span class="iconfont icon-mima3"></span>
        </template>
      </van-field>
      <van-button
          type="primary"
          block
          :loading="loginBtnLoading"
          :disabled="loginBtnDisable"
          :loading-text="'登录中...'"
          @click="handleLogin"
      >登录</van-button>
    </van-cell-group>
  </div>
</template>

<style scoped lang="scss">

</style>